<template>
    <div class="myexam">
        <div class="current-exam">
            <div class="title">
                <h2>考试排行榜</h2>
            </div>
            <ul class="exam-list">
                <li class="exam" v-for="item in exmas_list.exmas" :key="item.examId">
                    <el-descriptions :title="item.examTitle" size="large">
                        <el-descriptions-item label="考试描述:">{{ item.examDesc }}</el-descriptions-item>
                        <el-descriptions-item label="持续时间:">{{ item.duration / 60 }} 分钟</el-descriptions-item>
                        <el-descriptions-item label="开始时间：">{{ item.startTime }}</el-descriptions-item>
                        <el-descriptions-item label="结束时间：">{{ item.endTime }}</el-descriptions-item>
                    </el-descriptions>
                    <el-button type="primary" @click="getExamRank(item.examId)">查询该考试成绩</el-button>
                </li>
            </ul>
        </div>
    </div>
</template>


<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router"
import message_notice from "../functional/message_notice";
import { useUrlStore } from "../stores/urlStore";

interface Exam {
    examId: number,
    examTitle: string,
    examDesc: string,
    duration: number,
    startTime: string,
    endTime: string,
    status: string
}

let exmas_list = reactive({
    exmas: [] as Exam[]
})

const urlStore = useUrlStore()

const get_exam_list = async () => {
    try {
        let token: any = sessionStorage.getItem("token")
        let resp = await fetch(`${urlStore.baseurl}/exam/list`, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "token": token
            }
        })
        let data = await resp.json()
        if (data.code === 200) {
            message_notice("获取考试列表成功", "success")
            exmas_list.exmas = data.data
        } else {
            message_notice("获取考试列表失败", "error")
        }
    } catch (error) {
        message_notice("获取考试成绩失败,或者请等待考试结束再进行查看", "error")
    }
}

onMounted(() => {
    get_exam_list()
})

const router = useRouter()
const getExamRank = (examId: number) => {
    router.push({ name: "ranklist", params: { examId: examId } })
}
</script>


<style scoped lang="scss">
.myexam {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .current-exam {
        margin-top: 10px;
        width: 75%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;

        .title {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;

            h2 {
                font-size: 24px;
                font-weight: bold;
                line-height: 50px;
            }
        }

        .exam-list {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 30px;

            .exam {
                width: 800px;
                height: auto;
                border: 2px solid #ccc;
                padding: 10px 10px;
            }
        }

    }
}
</style>